<template>
	<view>
		<view class="cu-form-group">
			<view class="title"><text v-show="required" class="text-red">*</text><text :style="errorTip?'color:#e54d42;':''">{{labelName}}</text></view>
			<textarea v-show="disabled == false" :style="errorTip?'border-bottom:1px solid #e54d42;':''"  auto-height="true" type="text" :name="path" :value="value" :maxlength="maxlength" :placeholder="placeholderTip" @blur="emitBlur($event.target.value)" @input="emitInput($event.target.value)" :disabled="disabled">
			</textarea>
			<text v-show="disabled == true" style="word-break: break-all;">
				{{value}}
			</text>
		</view>
	</view>
</template>

<script>
	/**
	 * 多行输入框组件
	 * @property {String} value 传入默认值
	 * @property {String} labelName 标签名称
	 * @property {String} path 绑定的name值
	 * @property {String} placeholder 提示内容
	 * @property {Boolean} required 是否必填
	 * @property {Number} maxlength 最大长度
	 * @property {Boolean} disabled 是否只读
	 * @event @input 输入事件
	 * @event @blur 失去焦点事件
	 * @example <js-textarea labelName='多行文本' path='testTextarea' :value='main.testTextarea' maxlength="200"></js-textarea>
	 */
	export default {
		name: 'js-textarea',
		behaviors: ['uni://form-field-group'],
		data() {
			return {
				errorTip: false
			}
		},
		computed:{
			placeholderTip(){
				return this.disabled ? '' : this.placeholder
			}
		},
		props: {
			labelName: {
				type: String,
				default: ''
			},
			path: {
				type: String,
				default: ''
			},
			value:{
				type: String,
				default: ''
			},
			placeholder: {
				type: String,
				default: '请输入相关内容'
			},
			required:{
				type: Boolean,
				default: false
			},
			maxlength:{
				type:Number,
				default:-1
			},
			disabled:{
				type: Boolean,
				default: false
			}
		},
		methods:{
			emitBlur: function(value){
				this.$emit("blur",  value)
				if(this.required && !this.disabled){
					if(value.length == 0){
						this.errorTip = true;
						uni.showToast({
							icon: 'none',
							title: this.labelName + '不能为空'
						})
					}
				}
			},
			emitInput: function(value){
				this.errorTip = false;
				this.$emit("input",  value)
			}
		}
	}
</script>

<style>
	.cu-form-group{
		border-top:null;
		border-bottom:1rpx solid #eee;
	}
</style>
